<template>
    <div>
        <el-button text @click="controlsHide" v-if="addDisplay == true">
            新增
        </el-button>
        <el-button text @click="controlsHide" v-if="addDisplay !== true"
            style="color:#1abc9c;padding: 0;margin: 0;width: 40px;">
            编辑
        </el-button>
        <el-dialog v-model="dialogFormVisible" title="新增团检信息" width="59%" :append-to-body="true">
            <div class="box">
                <el-form :model="Add">
                    <div class="topBox">
                        <el-form-item label="团检单位：" :label-width="formLabelWidth" :rules="[{ required: true }]" prop:unit>
                            <el-input v-model="Add.unit" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="联系人姓名:" :label-width="formLabelWidth" :rules="[{ required: true }]"
                            prop:contacts>
                            <el-input v-model="Add.contacts" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="联系人电话:" :label-width="formLabelWidth" :rules="[{ required: true }]" prop:tel>
                            <el-input v-model="Add.tel" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="团检机构：" :label-width="formLabelWidth" :rules="[{ required: true }]">
                            <el-transfer v-model="value" filterable :filter-method="filterMethod" filter-placeholder="请输入内容"
                                :data="data" :titles="['机构列表', '已选机构']" />
                        </el-form-item>
                        <el-form-item label="备注：" :label-width="formLabelWidth">
                            <el-input v-model="Add.scope" :rows="2" type="textarea" />
                        </el-form-item>
                    </div>

                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="sendadds(peopleId as number)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import service from '@/utils/service';
import { ElMessage } from 'element-plus'
const dialogFormVisible = ref(false)
const value = ref('')
const formLabelWidth = '140px'
const emit = defineEmits(['addChange'])

const props = defineProps<{
    addDisplay: Boolean,
    peopleId?: number
}>()
//取消焦点
const controlsHide = (e: MouseEvent) => {
    let target = e.target
    if ((target as HTMLElement).nodeName == "I" || (target as HTMLElement).nodeName == "SPAN") {
        target = (target as HTMLElement).parentNode
    }
    console.log(target);

    (target as HTMLElement).blur()
    dialogFormVisible.value = true
}

//定义编辑，添加数据
interface IAdd {
    "unit": string,
    "contacts": string,
    "tel": string,
    "scope": string,
    "id": string,
    "encoded"?:string,
    "total":699,
    "appointment": 233,
    "physical":100,
}
const Add = reactive({
    "unit": '',
    "contacts": '',
    "tel": '',
    "scope": '',
    "id": '',
    "total":699,
    "appointment": 233,
    "physical":100,
})
//判断是添加还是编辑
const addInformation = (id: number) => {
    if (props.addDisplay == true) {
        service({
            url: '/peopleList',
            method: 'post',
            data: {
                unit: Add.unit,
                contacts: Add.contacts,
                tel: Add.tel,
                scope: Add.scope,
                id: Add.id
            }
        }).then(res => {
            if (res.data) {
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                })
                emit("addChange")
                dialogFormVisible.value = false;
                Add.unit = '',
                    Add.contacts = '',
                    Add.tel = '',
                    Add.scope = ''
            }
        })
    } else {
        //编辑
        service({
            url: `/peopleList/${id}`,
            method: "put",
            data: {
                unit: Add.unit,
                contacts: Add.contacts,
                tel: Add.tel,
                scope: Add.scope,
                id: Add.id
            }
        }).then(res => {
            ElMessage({
                message: '编辑成功',
                type: 'success',
            })
            emit("addChange")
            dialogFormVisible.value = false;
            console.log(id);

        })
    }

}
watch(dialogFormVisible, () => {
    if (dialogFormVisible.value && props.addDisplay === false) {
        service({
            url: `/peopleList/${props.peopleId}`,
        }).then(res => {
            if (res.data) {
                let key: keyof IAdd;
                for (key in Add) {
                    Add[key] = res.data[key] as never
                }
            }
        })
    }
})
//添加正则非空判断
const sendadds = (id: number) => {
    if (Add.unit && Add.contacts && Add.tel) {
        addInformation(id)

    } else {
        ElMessage({
            message: '请填写完整的数据',
            type: 'warning',
        })
    }
}
const filterMethod = (query: any, item: any) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
}
//穿梭框
interface Option {
    key: number
    label: string
    initial: string
}

const generateData = () => {
    const data: Option[] = []
    const states = [
        '朝阳店',
        '顺义店',
        '延庆店',
        '怀柔店'
    ]
    const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states.forEach((city, index) => {
        data.push({
            label: city,
            key: index,
            initial: initials[index],
        })
    })
    return data
}
const data = ref<Option[]>(generateData())
</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-button {
    box-sizing: border-box;
    width: 81px;
    height: 30px;
    background-color: #ffffff00;
    cursor: pointer;
    font-size: 12px;
    border-radius: 0;
    color: #000;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

:deep(.el-dialog__header) {
    margin-right: 0;
    background-color: #f2f2f2;
}

:deep(.el-dialog__title) {
    padding-right: 700px;
    font-weight: 700;
}

:deep(.el-textarea__inner) {
    height: 130px;
}

:deep(.el-transfer) {
    display: flex;
}

:deep(.el-transfer .el-transfer-panel) {
    width: 150px;
    height: 270px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(230, 228, 228, 0.679);
    border-radius: 3px;
}

:deep(.el-dialog__body) {
    width: 135px;
    height: 105px;
    overflow: auto;
    z-index: 999;
}

:deep(.el-transfer__buttons) {
    padding: 0;
    margin: 0;
    margin-top: 100px;
}

:deep(.el-transfer-panel__filter) {
    margin: 5px;
}

:deep(.el-transfer__button) {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0;

}

:deep(.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label) {
    font-size: 8px;
}</style>